<template>
    <div class="home-page">
        <h1>{{ t('message.home.title') }}</h1>
        <p>{{ t('message.home.subtitle') }}</p>

        <van-form>
            <van-field v-model="amount" type="number" :label="t('message.home.amount')" />
            <van-button type="primary" block @click="convert">
                {{ t('message.home.convert') }}
            </van-button>
        </van-form>

        <LanguageSwitcher class="language-switcher" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'

const { t } = useI18n()
const amount = ref('')

function convert() {
    // 兑换逻辑
    console.log('Converting:', amount.value)
}
</script>

<style scoped>
.home-page {
    padding: 16px;
}

.language-switcher {
    margin-top: 20px;
}
</style>
